<!DOCTYPE html>
<!-- 声明html5标准 -->
<html lang='zh'>
<!-- 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站
对html页面本身不会有影响,这些现在都是html规范，你的页面越规范，就越容易被收录 -->

<head>
    <meta charset='UTF-8'>
    <!-- 声明使用UTF-8 Unicode编码，UTF-8编码优先采用的编码 -->
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <!--  X-UA-Compatible是针对IE新加的一个设置 声明兼容到edge -->
    <meta name='viewport' content='width=device-width, initial-scale=no'>
    <!--width:可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 -->
    <title>Document</title>
    <!-- 引入vue.js -->
    <script src='./js/vue.js'></script>
    <style>
        .main-box>div {
            border: 1px solid red;
        }

        .shape {
            display: flex;
        }
    </style>
</head>

<body>
    <div id='root'>
        <templ @shapetype="receiveShapeType" @passcollatetype="passcollatetype" @addvalue="addvalue" @passinputvalue='passinputvalue'></templ>
        <div :class="['main-box',{'shape':!isShow}]">
            <div v-for="(item,index) in searchValue()" :key='index'>{{item.title}}</div>
        </div>
    </div>

    <template id="templ">
        <div>
            <button @click="isClick=true">竖</button>
            <button @click="isClick=false">横</button>
            <button @click="isBig=true">大</button>
            <button @click="isBig=false">小</button>
            <input type="text" v-model="inputValue">
            <button @click="passInputValue">添加</button>
        </div>
    </template>
    <script>
        Vue.component("templ", {
            template: "#templ",
            data() {
                return {
                    isClick: true,
                    isBig: true,//用来控制是从大到小还是从小到大
                    inputValue:'',
                }
            },
            watch: {
                isClick(newVlue) {
                    this.$emit("shapetype", newVlue)
                },
                isBig(newValue) {
                    this.$emit("passcollatetype", newValue)
                },
                inputValue(){
                    this.$emit("passinputvalue",this.inputValue)
                }
            },
            methods:{
                passInputValue(){
                    this.$emit("addvalue",this.inputValue)
                    
                }
            }
        })
        let vue = new Vue({
            // 选择控制区域,通过选择器去选到他，工作中一般使用id选择器;
            el: '#root',
            // 数据储存位置
            data: {
                list: [{ title: "text1", id: 1 },
                { title: "text2", id: 2 },
                { title: "text3", id: 3 },
                { title: "text4", id: 4 },
                { title: "text5", id: 5 }],
                isShow: true,
                keyWords:""
            },
            // 方法的储存位置
            methods: {
                receiveShapeType(data) {
                    this.isShow = data;
                },
                passcollatetype(data) {
                    if (data) {
                        this.list = this.list.sort((a, b) => b.id - a.id);
                    } else {
                        this.list = this.list.sort((a, b) => a.id - b.id);
                    }
                },
                addvalue(data){
                    this.list.push({title:data,id:this.list.length+1})
                    localStorage.list1=JSON.stringify(this.list)
                },
                passinputvalue(data){
                    this.keyWords=data;
                },
                searchValue(){
                   return this.list.filter(item=>item.title.includes(this.keyWords))
                }
            },
            created(){
                    this.list=JSON.parse(localStorage.list1);
                    console.log(this.list)
            }
        })
    </script>
</body>

</html>